<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<script src='./vue.js'></script>
<style>
    *{
        margin:0;
        padding :0;
        box-sizing: border-box;
    }
    #app{
        background-color: #e3e3e3;
        width: 223px;
        height: 400px;
    }
    .timage{
        width: 95%;
        height: 60%;
        margin: 2.5% 2.5%;
        margin-bottom: 0;
    }
    #tcontent{
        width: 95%;
        height: 30%;
        margin: 0 20px;
        background-color: white;
        }
    span{
        font-size:14px;
        background-color:rgb(38, 189, 98);
        text-align: center;
        line-height: 20px;
        margin-right: 4px;
        border-radius: 3px;
        padding:0 4px;
        
    }
    .market{
        font-size: 16px;
        margin: 0 4px;
        text-align: justify;
    }
</style>
</head>
<body>
<div id='app'>
    <my-pic></my-pic>
    <my-con></my-con>
</div>
</body>
<template id="tcontent">
    <p><span class="market">京东超市</span>纽仕兰3.5g蛋白京东超市质高钙全脂纯牛奶250...</p><br>
    
</template>
<script>
const myPicture={
    template:'<img src="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/191395/1/44957/217157/66407b2eF3b001a4e/d957d6c2d4bcfa25.jpg!q70.dpg.webp"alt="" class="timage" >',
    data() {
            return {}
        },
    methods: {},
    computed: {}
}

const myContent={
    template:'#tcontent',
    data() {
        return {}
    },
    methods: {},
    computed: {},
    components:{

    }
}

const app = {
data() {
return {}
},
methods: {},
components: {
    'my-pic': myPicture,
    'my-con': myContent
}
}
const vm = Vue.createApp(app).mount('#app')
</script>
</html>